<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行变色</title>
		<style>
			table{
				width: 500px;
				border: 1px solid rgb(208,208,208);
				text-align: center;
				border-collapse: collapse;				
			}
			thead{
				color: white;
				background-color: rgb(0,153,204);
			}
			#tb{
				color: black;
			}
			th,td{
				height: 40px;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>课程</th>
					<th>成绩</th>
				</tr>
			</thead>
			<tbody id="tb">
				<tr>
					<td>	1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>2</td>
					<td>吕布</td>
					<td>日语</td>
					<td>100</td>
				</tr>
				<tr>
					<td>3</td>
					<td>吕蒙</td>
					<td>营销学</td>
					<td>100</td>
				</tr>
				<tr>
					<td>4</td>
					<td>吕尚</td>
					<td>数学</td>
					<td>100</td>
				</tr>
				<tr>
					<td>5</td>
					<td>吕雉</td>
					<td>英语</td>
					<td>100</td>
				</tr>
				<tr>
					<td>6</td>
					<td>吕超</td>
					<td>体育</td>
					<td>100</td>
				</tr>
			</tbody>
		</table>
		<script>
			var table = document.getElementById("tb");
			var trArray = table.getElementsByTagName("tr");
			for(var i = 0;i < trArray.length;i++)
			{
				if(i%2 == 1)
				{
					trArray[i].style.backgroundColor = "rgb(204,204,204)";
				}
				else
				{
					trArray[i].style.backgroundColor = "rgb(163,163,163)";
				}
				var color = "";
				trArray[i].onmouseover = function(){
					color = this.style.backgroundColor;
					this.style.backgroundColor = "white";
				}
				trArray[i].onmouseout = function(){
					this.style.backgroundColor = color;
				}
			}
		</script>
	</body>
</html>
